import { View, Text } from '@tarojs/components'
import { Card, CdnImage, FloatAddButton } from '@/ui-components'
import Taro from '@tarojs/taro'
import { useEffect } from 'react'
import { useAppDispatch, useAppSelector } from '@/store/hooks'
import { getTreasuryPrizeList } from '@/network/treasury'
import to from 'await-to-js'
import { setTreasuryPrizeList } from '@/store/treasurySlice'
import { TreasuryPrize, TreasuryPrizeOpenMode } from '@/types'
import dayjs from 'dayjs'
import { map } from 'lodash'
import './index.scss'

interface TreasuryPrizeItemProps {
  treasuryPrize: TreasuryPrize
  onClick: () => void
}

const TreasuryPrizeOpenDesc = ({ treasuryPrize } : { treasuryPrize: TreasuryPrize }) => {
  if (treasuryPrize.openMode === TreasuryPrizeOpenMode.person) {
    return <View className='text-normal'>
      满{treasuryPrize.personNum}人开奖（当前参与：<Text className='warning'>{treasuryPrize.curNum}</Text>人）
    </View>

  }
  if (treasuryPrize.openMode === TreasuryPrizeOpenMode.time) {
    return <View className='text-normal'>
      <Text className='warning'>{dayjs(treasuryPrize.openTime).format('YYYY/MM/DD HH:mm:ss')}</Text>开奖
    </View>
  }
}

const TreasuryPrizeItem = ({ treasuryPrize, onClick } : TreasuryPrizeItemProps ) => {
  return (
    <Card padding onClick={() => onClick()}>
      <View className='row-start-stretch flex-1'>
        <CdnImage src={treasuryPrize.image} className='image-160 border-radius-small' />
        <View className='column-between-start flex-1 ml-medium'>
          <View className='text-title'>{treasuryPrize.name}</View>
          <View className='text-normal row-start-center'>
            <View>价值<Text className='success'>{treasuryPrize.worth}</Text>积分</View>
            <View className='ml-medium row-start-center'>({ treasuryPrize.cost === 0 ? <Text className='warning'>不需消耗积分</Text> : <View>消耗积分：<Text className='success'>{treasuryPrize.cost}</Text></View>})</View>
          </View>
          <TreasuryPrizeOpenDesc treasuryPrize={treasuryPrize} />
        </View>
      </View>
    </Card>
  )
}

export default function TreasuryLottery() {

  const treasuryId = useAppSelector(state => state.treasury.userTreasury.treasuryId)
  const treasuryPrizeList = useAppSelector(state => state.treasury.prizeList)
  const userTreasury = useAppSelector(state => state.treasury.userTreasury)
  const dispatch = useAppDispatch()

  useEffect(() => {
    const initTreasuryMarket = async () => {
      const [err, treasuryPrizeList] = await to(getTreasuryPrizeList(treasuryId, { hideLoading: true }))
      if (err) return
      dispatch(setTreasuryPrizeList(treasuryPrizeList))
    }

    initTreasuryMarket()
  }, [userTreasury])

  return (
    <View className='treasury-lottery'>
      <View className='pv-medium bg-primary row-start-center'>
        <View className='text-center flex-1 text-primary border-right'>抽奖记录</View>
        <View className='text-center flex-1 text-primary'>中奖记录</View>
      </View>
      {
        map(treasuryPrizeList, (treasuryPrize: TreasuryPrize) => (
          <TreasuryPrizeItem
            treasuryPrize={treasuryPrize}
            onClick={() => Taro.navigateTo({ url: `/subpages/treasury/prize/detail/index?treasuryPrizeId=${treasuryPrize.treasuryPrizeId}` })}
          />
        ))
      }
      <FloatAddButton onClick={() => Taro.navigateTo({ url: '/subpages/treasury/prize/create/index' })} />
    </View>
  )
}
